<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点餐</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
   table th,td {
        text-align: center;
    }

    button {
        cursor: pointer;
        margin: 2px;
    }
    span{color: red;font-size: 26px;}
</style>

<body>
    <div style="float: left;">
        <div>
            <h2 style="color: red;">添加菜品</h2>
            <input type="text" id='in1'>
            <button id='yes'>确认</button>
        </div>
        <br>
        <div>
            <h2 style="color: green;">点餐区</h2>
            名&emsp;&emsp;字：<input type="text" id='username'><br><br>
            用餐时间：<input type="date" id='eattime'> 备注：<input type="text" id="eattime1" placeholder="几点用餐">
            <p style="color: #666;">点击点餐</p>
        </div>
        <div style="height: 200px;" id='box'>
            <button disabled>餐具</button>
            <div id='box2' style="width: 300px;"></div>
        </div>
        <div id='box1' style=" margin-left: 150px; margin-top: -30px;">
            <button id='bt1'
                style="background: blue; color: #fff; border: none; width: 150px;height: 50px;font-size: 20px;border-radius:10px; ">加入点餐列表</button>
            <h2 style="color: #666;">已点:</h2>
        </div>
    </div>
    <table border="1" style="border-collapse: collapse; float: left; width: 1000px;margin-left: 100px;margin-top: 80px;">
        <caption>
            <h2>已点列表</h2>
        </caption>
        <thead>
            <th>时间</th>
            <th>名字</th>
            <th>点餐内容</th>
            <th>操作</th>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button id='bt2' style="border-radius: 20px;width: 200px;height: 80px;border: none; background: greenyellow; color: red;font-size: 26px;margin-left: -150px;margin-top: 30px;">确认下单</button>
</body>
<script>
    $(function () {
        getmenu()
        getmenu1()
        var m=0
        $('#box button').click(function () {
            var str = ""
           

            str +=
                ` <div><b>1*</b><i>${$(this).html()}</i><span class='s1' onclick='ff(this)' style='cursor:pointer'>×</span></div> `
            var st = $(this).html()
            $('#box1 i').each(function (a, v) {
                if ($(v).html().includes(st)) {
                   var n=0  
                    n++
                   var ss= (m+=n) +'*'
                    str =
                        `<div> <b>${ss}</b><i>${$(this).html()}</i><span class='s1' onclick='ff(this)' style='cursor:pointer;'>×</span></div> `
                    $(v).next().remove()
                    $(v).prev().remove()
                    $(v).remove()
  
                    return
                }
               
            })
            $('#box1').append(str)
        })

        $('#bt1').click(function () {
            var name = $('#username').val(),
                eattime = $('#eattime').val() +'&ensp;'+ $('#eattime1').val(),
                eatting = ''
            var tea = $('#box1').children().children('i')
            if(!name){alert('请填写姓名');return}
            if(!$('#eattime').val()&&!$('#eattime1').val()){alert('请填写用餐时间');return}
            
            tea.each(function (a, v) {
                eatting +=$(v).prev().html()+ $(v).html()+"&ensp;"
            })
            var obj1 = {
                name: name,
                eattime: eattime,
                eatting: eatting
            }
            if(!obj1){alert('请点餐');return}
            setmenu1(obj1)
            getmenu1()
        })
    })

    function ff(that) {
        $(that).prev().prev().remove()
        $(that).prev().remove()
        $(that).remove()
    }
    // 菜单1
    function setmenu1(obj1) {
        if (!localStorage.getItem('menu1')) {
            localStorage.setItem('menu1', JSON.stringify([obj1]))
        } else {
            var data = JSON.parse(localStorage.getItem('menu1'))
            data.push(obj1)
            localStorage.setItem('menu1', JSON.stringify(data))
        }
    }

    function getmenu1() {
        if (!localStorage.getItem('menu1')) {
            return
        }
        var data = JSON.parse(localStorage.getItem('menu1')),
            htmlStr = ""
        for (let i in data) {
            htmlStr += `<tr>
                        <td>${data[i].eattime}</td>
                        <td>${data[i].name}</td>
                        <td>${data[i].eatting}</td>
                        <td><a href="#" onclick='del(${i})'>删除</a></td>
                    </tr>`
        }
        $('tbody').html(htmlStr)
    }
    // 删除
    function del(index) {
        var data = JSON.parse(localStorage.getItem('menu1'))
        data.splice(index, 1)
        localStorage.setItem('menu1', JSON.stringify(data))
        getmenu1()
    }
    // 加菜
    $('#yes').click(function () {
        var obj = {
            caiming: $('#in1').val()
        }
        setmenu(obj)
        getmenu()
    })
    // 菜单
    function setmenu(obj) {
        if (!localStorage.getItem('menu')) {
            localStorage.setItem('menu', JSON.stringify([obj]))
        } else {
            var data = JSON.parse(localStorage.getItem('menu'))
            data.push(obj)
            localStorage.setItem('menu', JSON.stringify(data))
        }
    }

    function getmenu() {
        if (!localStorage.getItem('menu')) {
            return
        }
        var data = JSON.parse(localStorage.getItem('menu')),
            htmlStr = ""
        for (let i in data) {
            htmlStr += `<button>${data[i].caiming}</button>`
        }
        $('#box2').html(htmlStr)
    }
    $('#bt2').click(function(){
        alert('已下单，如需退菜请联系服务员')
        $('a').removeAttr('onclick')
    })
</script>

</html>